<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to QtJambi</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Qt, QtJambi, Java, Introduction">
<meta name="description" content="Introduction to QtJambi">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to QtJambi</h1>

<p>
In this part of the QtJambi programming tutorial, we will 
introduce the QtJambi toolkit and create our first QtJambi programs.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
The purpose of this tutorial is to get you started with the QtJambi toolkit. 
Images used in this tutorial can be downloaded <a href="/img/gui/qtjambi/images.zip">here</a>. 
I used some icons from the tango icons pack of the Gnome project. 
</p>


<h2>About</h2>

<p>
<b class="keyword">QtJambi</b> is a cross platform toolkit for creating graphical user interfaces. 
It is based on two highly successful technologies. The Qt library and the Java
programming language. Qt is a powerful cross-platform application development framework.
Its native language is C++. Java is wildly successful programming language. 
QtJambi is a Java binding of the Qt library. Unlike Python, C# and Ruby bindings, Java
binding is officially supported by the Nokia company. 
</p>

<h2>Creating a Tooltip</h2>

<p>
The first example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program displays a
 * tooltip
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class JambiApp extends QWidget {

    public JambiApp() {

        setWindowTitle("Tooltip");

        setToolTip("This is QWidget");
        
        resize(250, 150);
        move(300, 300);
        show();
    }


    public static void main(String args[])
    {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>


<pre class="explanation">
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
</pre>

<p>
These are necessary imports of components that we use in the code example.
</p>

<pre class="explanation">
public class JambiApp extends QWidget {
</pre>

<p>
The example inherits from a <b class="keyword">QWidget</b>. 
The QWidget class is the base class of all user interface objects. 
The widget is the atom of the user interface. It receives mouse, 
keyboard and other events from the window system.
</p>

<pre class="explanation">
setWindowTitle("Tooltip");
</pre>

<p>
This method call creates a title for the window. 
</p>

<pre class="explanation">
setToolTip("This is QWidget");
</pre>

<p>
The <b class="keyword">setToolTip</b> method creates a tooltip for the
QWidget object. 
</p>

<pre class="explanation">
resize(250, 150);
</pre>

<p>
Here we set the width and the height of the window. 
</p>

<pre class="explanation">
move(300, 300);
</pre>

<p>
The <b class="keyword">move()</b> method moves the window on the
screen. 
</p>

<pre class="explanation">
show();
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>

<pre class="explanation">
QApplication.initialize(args);
new JambiApp();
QApplication.exec();
</pre>

<p>
These three lines set up the application. 
</p>

<br>
<img src="/img/gui/qtjambi/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Centering a window</h2>

<p>
In the second example, we will center the window
on the screen. 
</p>

<pre class="code">
package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QDesktopWidget;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program centers a window
 * on the screen
 * 
 * @author jan bodnar
 * website zetcode.com
 * last modified April 2009
 */

public class JambiApp extends QWidget {

    private final int WIDTH = 250;
    private final int HEIGHT = 150;

    public JambiApp() {

        QDesktopWidget qdw = new QDesktopWidget();

        int screenWidth = qdw.width();
        int screenHeight = qdw.height();

        int x = (screenWidth - WIDTH) / 2;
        int y = (screenHeight - HEIGHT) / 2;

        resize(WIDTH, HEIGHT);
        move(x, y);
        setWindowTitle("Center");
        show();
    }
    
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
The QtJambi does not have a single method
to center a window.
</p>


<pre class="explanation">
private final int WIDTH = 250;
private final int HEIGHT = 150;
</pre>

<p>
These two constants define the width and height of the
application window.
</p>

<pre class="explanation">
QDesktopWidget qdw = new QDesktopWidget();
</pre>

<p>
The <b class="keyword">QDesktopWidget</b> class provides information about
the screen. 
</p>

<pre class="explanation">
int screenWidth = qdw.width();
int screenHeight = qdw.height();
</pre>

<p>
Here we determine the screen width and height. 
</p>

<pre class="explanation">
int x = (screenWidth - WIDTH) / 2;
int y = (screenHeight - HEIGHT) / 2;
</pre>

<p>
Here we calculate the x, y coordinates of the centered window. 
To center a window on the screen, we need to know the size of the
screen and the size of the window. 
</p>

<pre class="explanation">
move(x, y);
</pre>

<p>
We move the window to the computed x, y coordinates.
</p>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">

package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program creates a quit
 * button. When we press the button,
 * the application terminates
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified April 2009
 */

public class JambiApp extends QWidget
{

    public JambiApp() {

        setWindowTitle("Quit button");

        initUI();

        resize(250, 150);
        move(300, 300);
        
        show();
    }

    private void initUI() {

        QPushButton quit = new QPushButton("Quit", this);
        quit.setGeometry(30, 30, 75, 30);

        quit.clicked.connect(QApplication.instance(), "quit()");
    }

    public static void main(String args[])
    {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
We use the <b class="keyword">QPushButton</b>.This is a very common widget.
It is a rectangular and usually shows a text label. 
</p>

<pre class="explanation">
initUI();
</pre>

<p>
We delegate the creation of the user interface to the <b class="keyword">initUI()</b> method.
</p>

<pre class="explanation">
QPushButton quit = new QPushButton("Quit", this);
</pre>

<p>
We create the button widget. The first parameter of the constructor is the label,
which the button displays. The second parameter is the parent widget of the
button. 
</p>

<pre class="explanation">
quit.setGeometry(30, 30, 75, 30);
</pre>

<p>
We position and size the button widget. The first two parameters are the x, y
coordinates of the button. The last two parameters are the width and 
height of the button.
</p>

<pre class="explanation">
quit.clicked.connect(QApplication.instance(), "quit()");
</pre>

<p>
The <b class="keyword">clicked</b> signal is emitted, when we
click on the button. The <b class="keyword">connect()</b> method
connects a signal to a particular slot of an object. The first 
parameter of the method is the object, that receives the signal. 
In our case it is the application object. The second parameter is the
method, which is called. In our case it is the <b class="keyword">quit()</b>
method of the application object. 
</p>

<br>
<img src="/img/gui/qtjambi/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<hr class="btm">

<p>
This section was an introduction to the QtJambi toolkit. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified April 27, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!--content -->

</div> <!--container -->

</body>
</html>
